<template>
  <div class="video">
    <van-nav-bar
      title="视频"
      left-text="返回"
      @click-left="$router.go(-1)"
    />
    <!-- 设置视频容器 -->
    <div id="video-container"></div>
  </div>
</template>

<script>
/*eslint-disable*/
import { videoPlayInfo } from '@/services/course'
export default {
  name: 'CourseVideo',
  props: {
    lessonId: {
      type: [Number, String],
      required: true
    }
  },
  created () {
    this.loadVideo()
  },
  data () {
    return {

    }
  },
  methods: {
    async loadVideo () {
      const { data } = await videoPlayInfo(this.lessonId)
      // 初始化播放器
      const player = new window.Aliplayer({
      // 视频容器ID
      id: 'video-container',
      // 视频ID
      vid: data.content.fileId,
      // 播放凭证
      playauth: data.content.playAuth,
      qualitySort: 'asc',
      format: 'mp4',
      mediaType: 'video',
      width: '100%',
      height: '100%',
      autoplay: true,
      isLive: false,
      rePlay: false,
      playsinline: true,
      preload: true,
      controBarVisibility: 'hover',
      useH5Prism: true
      }, function(player) {
        console.log('The player is created')
      })
      console.log(player)
    }
  }
}

</script>
<style lang='scss' scoped>
.video {
  width: 100%;
  height: 210px;
}
#video-container {
  width: 100%;
  height: auto;
}
</style>
